<template>
  <div id="app">
    <div class="con">
        <div class="left">
            <ul>
                <li v-for="(item,ind) in navList" :key="ind" @click="change(item.id)">{{item.name}}</li>
            </ul>
        </div>
        <div class="right">
            <dl-item v-for="(item,i) in product" 
                :name="item.name"
                :price="item.price"
                :url="item.url"
                :id="item.id"
                :num="item.num"
                :key="i"
            ></dl-item>
        </div>
    </div>
    <footer>
        <span>总数量:{{totalNum}}</span>
        <span>总价钱：{{totalMoney}}</span>
    </footer>
  </div>
</template>

<script>
import dlItem from './components/dl-item'

export default {
  name: 'App',
  created(){
     this.$http.get('/api/nav').then(res => {
         if(res.data.code === 1){
             console.log(res)
             this.navList = res.data.data;
             let id = res.data.data[0].id;
            return this.$http.get('/api/proList',{params:{type:id}})
         }
     }).then(pRes => {
         if(pRes.data.code === 1){
             this.product = pRes.data.data.map(item => {
                 item.num = 0;
                 this.buyList.forEach(bItem => {
                     if(bItem.id === item.id){
                         item.num = bItem.num
                     }
                 })
                 return item
             });
         }
     })

     this.$bus.$on('count',(num,id) => {
         console.log(num,id);
         let index = this.product.findIndex(item => item.id === id);

        let bInd = this.buyList.findIndex(item => item.id === id);

        this.product[index].num = num;

        if(bInd != -1){
            // 说明已购买
            console.log("===num====",num);

            this.buyList[bInd].num = num;

            console.log(this.buyList[bInd]);

        }else{
            // 说明没买
            
            this.buyList.push(this.product[index]);
        }

        window.localStorage.setItem('buyList',JSON.stringify(this.buyList))
    })
  },
  data(){
      return {
          navList:[],  //左侧渲染的数据
          product:[],  //右侧渲染的数据
          buyList:JSON.parse(window.localStorage.getItem('buyList')) || []   //购买的数据
      }
  },
  computed:{
      totalNum(){
          let totalNum = 0;
          this.buyList.forEach(item => {
              totalNum += item.num 
          })
          return totalNum
      },
      totalMoney(){
        let totalMoney = 0;
          this.buyList.forEach(item => {
              totalMoney += item.num * item.price
          })
          return totalMoney
      }
    },
  components: {
      dlItem
  },
  methods:{
      change(id){
          this.$http.get('/api/proList',{params:{type:id}}).then(res=>{
              if(res.data.code === 1){
                  this.product =  res.data.data.map(item => {
                      item.num = 0;
                      this.buyList.forEach(bItem => {
                          if(bItem.id === item.id){
                              item.num = bItem.num;
                          }
                      })
                    
                    return item
                });
              }
          })
      }
  }
}
</script>

<style lang="scss">
    *{
        margin: 0;
        padding:0;
        list-style: none;
        box-sizing: border-box;
    }
    html,body,#app{
        width:100%;
        height: 100%;
        overflow: hidden;
    }
    #app{
        display:flex;
        flex-direction: column;
        .con{
            width:100%;
            flex:1;
            display: flex;
        }
        footer{
            width:100%;
            height:44px;
            background: #eee;
        }
    }
    .left{
        width:100px;
        height: 100%;
        font-size:12px;
        border-right:1px solid gray;
        li{
            width:100px;
            height: 44px;
            border-bottom:1px solid gray;
            line-height: 44px;
            text-align: center;
        }
    }

    .right{
        flex:1;
        height: 100%;
    }
</style>
